import React, { Component } from 'react';
import { Link } from 'react-router-dom';
import { Table } from 'antd';
import history from '../../../history';
import { connectRouter } from '../../../mixins/router';
import { Modal, Button } from 'antd';
import api from '../../../api/api';
import message from '@wanhu/antd-legacy/lib/message';
// 会员卡片弹窗
import CustomerCart from '../../customerCenter/CustomerCard';

class InsuranceTable extends Component {
  constructor(props) {
    super(props);
    this.state = {
      visible: false,
      customerCardVisiblfe: false,
      currentCustomerId: null,
      visible: false,
      getPagination:null
      // tableData:props.tableData

    };
  }
  componentWillMount() {
    this.handleOk();
  };
  checkInsurance = (row) => () => {
    history.push(`/patientInsuranceOrderInfo/${row.orderId}`);
  };
  tableChange = (pagination) => {
    this.props.pageChange(pagination)
    this.setState({
      getPagination:pagination
    })
  };
  // 显示会员卡片
  showCustomerCard = (id) => {
    console.log('showCustomerCard id:', id);
    this.setState({
      customerCardVisible: true,
      currentCustomerId: id,
    });
  };
  hideCustomerCard = () => {
    this.setState({
      customerCardVisible: false,
    });
  };
  quitOut =async (item,index) => {
    this.setState({
      visible: true,
      insurId: item.insurId
    });
  }
  handleOk = async () => {
    try {
      const data = await api.putRevoke(this.state.insurId);
      this.props.pageChange(this.state.getPagination);
      this.setState({
        visible: false,
      });
    } catch (err) {
      message.error(err?err:'退保操作异常',3 );
    }

  }
  handleCancel = () => {
    this.setState({
      visible: false,
    });
  }
  render() {
    const columns = [
      {
        title: '保险订单号',
        dataIndex: 'orderNo',
        width: 150,
        key: 'orderNo',
        render: (text, row) => {
          return (
            <Link
              to={`/patientInsuranceOrderInfo/${row.orderId}`}
            >
              <span className='clickable'>{text}</span>
            </Link>
          );
        },
      },
      {
        title: '服务单号',
        dataIndex: 'serviceOrderNo',
        width: 150,
        key: 'serviceOrderNo',
        render: (text, row) => {
          return (
            <Link
              to={`/patientInsuranceDetail/${row.orderId}?r=`}
            >
              <span className='clickable'>{text}</span>
            </Link>
          );
        },
      },
      {
        title: '保险类型',
        dataIndex: 'type',
        width: 150,
        key: 'type',
        render: (text, row) => {
          return (
            text === 1 ? '个险':'团险'
          );
        },
      },

      {
        title: '被保人',
        dataIndex: 'insuredName',
        key: 'insuredName',
        // crm1012管理列表中增加相应的链接
        render: (text, row) => {
          return (
            <span
              style={{ textDecoration: 'underline', cursor: 'pointer' }}
              onClick={() => {
                this.showCustomerCard(row.insuredId);
              }
              }
            >
              {text}
            </span >
          );
        },
      },
      // {
      //   title: '身份证号',
      //   dataIndex: 'insuredIdCard',
      //   width: 150,
      //   key: 'insuredIdCard',
      // },
      {
        title: '保险产品名称',
        dataIndex: 'packageProductName',
        key: 'packageProductName',
      },
      {
        title: '承保公司',
        dataIndex: 'companyName',
        key: 'companyName',
      },
      {
        title: '保单状态',
        dataIndex: 'status',
        key: 'status',
        render: (text, row) => {
          let temp = '';
          switch (text) {
            case 0:
              temp = '待激活';
              break;
            case 1:
              temp = '已承保';
              break;
            case 3:
              temp = '已完成';
              break;
            case 4:
              temp = '待退保';
              break;
            case 5:
              temp = '已退保';
              break
            case 8:
              temp = '投保失败';
              break;
            case 9:
              temp = '已撤单';
              break;
            case 10:
                temp = '已出险';
                break;
            default:
              temp = ''
          }
          return temp;
        },
      },
      {
        title: '保单号',
        dataIndex: 'insurId',
        key: 'insurId',
      },
      {
        title: '创建时间',
        dataIndex: 'createDate',
        key: 'createDate',
      },
      {
        title: '操作',
        key: 'operation',
        render: (text, row,index) => {
          return (
            <div>
              {row.status === 1?
                <span style={{ textDecoration: 'underline', cursor: 'pointer',display:'inline-block',marginRight:'10px' }}
                onClick={() => this.quitOut(row,index)}>
                  退保 </span> : null}
              <span
                style={{ textDecoration: 'underline', cursor: 'pointer' }}
                onClick={this.checkInsurance(row)}
              >
                  查看
              </span>
              </div>
          );
        },
      },
    ];
    let data = this.props.tableData
    return (
      <div className='table-box block'>
        <CustomerCart
          id={this.state.currentCustomerId}
          visible={this.state.customerCardVisible}
          hideCustomerCard={this.hideCustomerCard}
        ></CustomerCart>
        <Table
          columns={columns}
          dataSource={data.list}
          rowKey={(record) => record.insurId}
          pagination={{
            showSizeChanger: true,
            total: data.pageIndex !== 1 && data.count === data.pageSize ? data.count + 1 : data.count,
            showTotal: () => `第 ${data.pageIndex} 页`,
            pageSizeOptions: ['10', '20', '50', '100'],
            current: data.pageIndex,
            pageSize: data.pageSize,
          }}
          onChange={this.tableChange}
        />
        <Modal
          title="退保确认"
          visible={this.state.visible}
          onOk={this.handleOk}
          onCancel={this.handleCancel}
        >
          <p style={{textAlign:'center'}}>确认提交退保？</p>
        </Modal>
      </div>
    );
  }
}

export default connectRouter(InsuranceTable);
